<template>
    <div class="container">
        <a-tabs class="setting-tab">
            <a-tab-pane key="list" tab="轮播图">
                <a-carousel autoplay>
                    <div v-for="item in list" :key="item.id">
                        <img :src="item.image" :alt="item.title" class="banner-images">
                    </div>
                </a-carousel>
                <a-table :columns="columns" :dataSource="list" :pagination="false">
                    <template #bodyCell="{ column, record }">
                        <a-space v-if="column.dataIndex === 'operate'">
                            <a-button type="primary" @click="updateRow(record.id)">更新图片</a-button>
                        </a-space>
                        <a-space v-if="column.dataIndex === 'image'">
                            <img style="width:200px;heigth:60px" :src="record.image" :alt="record.title">
                        </a-space>
                    </template></a-table>
            </a-tab-pane>
        </a-tabs>
    </div>
    <a-modal v-model:visible="visible" title="更新图片" @ok="handleOk">
        <UploadImage @uploadSuccess="uploadImgae = $event" />
    </a-modal>
</template>

<script setup lang='ts'>
import UploadImage from '@/components/upload/index.vue'
import type { IPicture } from '@/types/news'
import { message } from 'ant-design-vue';

const columns = [
    { title: '标题', dataIndex: 'title' },
    { title: '封面', dataIndex: 'image' },
    { title: '操作', dataIndex: 'operate' }
]
const list = ref<IPicture[]>([])

onMounted(async () => {
    getList()
})
const getList = async () => {
    const res = await getBannerList()
    list.value = res.data.banner
}

const visible = ref<boolean>(false)
// 接收上传完后的图片地址 子传父
const uploadImgae = ref('')
const uploadId = ref(0)

const handleOk = async () => {
    const res = await updatedBanner(uploadId.value, { image: uploadImgae.value })
    if (res.code === 201) message.success('更新成功')
    getList()
    visible.value = false

}

const updateRow = (id: number) => {
    uploadId.value = id
    visible.value = true
}

</script>

<style lang="less" scoped>
.container {
    padding: 16px;

    .setting-tab {
        background-color: #fff;
        padding: 16px;
    }

    .banner-images {
        width: 100%;
        height: 460px;
    }
}

// 轮播图样式
.ant-carousel :deep(.slick-slide) {
    text-align: center;
    height: 460px;
    line-height: 460px;
    background: #364d79;
    overflow: hidden;
}

.ant-carousel :deep(.slick-slide h3) {
    color: #fff;
}
</style>